<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>收货地址管理</title>
		<!--导入vue-->
		<script type="text/javascript" src="js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="element-ui/lib/index.js"></script>
		<!--导入axios-->
		<script src="js/axios-0.19.0.js"></script>

		<style>
			.address-title {
				padding: 10px 0px;
				font-size: 26px;
				color: #eabc10;
			}

			.el-row {
				margin-bottom: 10px;
			}

			#app {
				padding: 15px;
			}
		</style>
	</head>
	<body>
		<main id="app">
			<el-row>
				<el-col :span="21">
					<el-page-header @back="exitlogin" content="Aop管理员日志" />
				</el-col>
				 <br />
				<el-input placeholder="查询管理员姓名" style="width:180px" v-model="param.qureyAdminName" clearable
					prefix-icon="el-icon-search">
				</el-input>
				<el-date-picker v-model="param.startDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
					value-format="timestamp">
				</el-date-picker>

				<el-select v-model="param.queryOperModel" placeholder="请选择查询的模块">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" plain size="small" icon="el-icon-search" @click="findAdminLog"
					style="height: 38px">查询</el-button>
				</el-col>
			</el-row>
			<!--表格部分-->
			<el-row>
				<el-col :span="24">

					<el-table max-height="95%" style="width: 100%" border :data="pageBean.records">

						<el-table-column prop="id" label="序号">
						</el-table-column>

						<el-table-column prop="created" label="操作时间">
						</el-table-column>

						<el-table-column prop="addressIp" label="ip地址">
						</el-table-column>

						<el-table-column prop="operUserId" label="管理员ID">
						</el-table-column>

						<el-table-column prop="operUserName" label="管理员姓名">
						</el-table-column>
						<el-table-column prop="operUrl" label="访问路径">
						</el-table-column>
						<el-table-column prop="operModul" label="操作模块">
						</el-table-column>
						<el-table-column prop="operType" label="操作类型">
						</el-table-column>

						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button size="mini" icon="el-icon-edit" type="success" plain
									@click="handleEdit(scope.$index, scope.row)">编辑
								</el-button>
							</template>
						</el-table-column>
					</el-table>

				</el-col>
			</el-row>

			<!-- 分页部分 -->
			<el-row>
				<el-col :span="24">
					<el-row>
						<el-col :span="24">
							<el-pagination background @size-change="handleSizeChange"
								@current-change="handleCurrentChange" :current-page="param.current"
								:page-sizes="[3,5,10]" :page-size="param.size"
								layout="total, sizes, prev, pager, next, jumper" :total="pageBean.total">
							</el-pagination>
						</el-col>
					</el-row>

				</el-col>
			</el-row>

			<!--
    新增和修改对话框
    close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
     -->
			<el-dialog title="访问数据参数" :visible.sync="dialogFormVisible" width="45%" @close="cancel"
				:close-on-click-modal="false">
				<el-input   v-model="url">
					<template slot="prepend">{{requestName}}</template>
				</el-input>
				<el-collapse accordion>
					<el-collapse-item title="访问的对象的方法">
						<div>{{value2.operMethodName}}</div>
	
					</el-collapse-item>
					<el-collapse-item title="参数">
						<div>{{value2.operParameter}}</div>
					</el-collapse-item>
				</el-collapse>
			</el-dialog>
		</main>
	</body>

	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				dialogFormVisible: false, //对话框不可见
				//表单
				form: {
					contact: '',
					address: '',
					telephone: ''
				},
				//查询参数
				param: {
					current: 1,
					size: 10,
					startDate: '',
					qureyAdminName: '',
					queryOperModel: ''
				},
				//页面对象
				pageBean: {},
				options: [{
						value: '',
						label: '全部模块'
					},
					{
						value: '1',
						label: '查询模块'
					}, {
						value: '2',
						label: '登陆模块'
					}, {
						value: '3',
						label: '冻结模块'
					}, {
						value: '4',
						label: '审核模块'
					}
				],
				value: '',
				value2: {},
				url: '',
				requestName: '',

				//校验规则
				rules: {
					//员工姓名
					contact: [{
							required: true,
							message: '姓名不能为空',
							trigger: 'blur'
						},
						{
							pattern: "^[\u4E00-\u9FA5]{2,4}$",
							message: '请输入2到4个汉字',
							trigger: 'blur'
						}
					],
					address: [{
							required: true,
							message: '联系地址必须输入',
							trigger: 'blur'
						},
						{
							min: 5,
							message: '联系地址必须大于5个字符',
							trigger: 'blur'
						}
					],
					telephone: [{
							required: true,
							message: '电话号码不能为空',
							trigger: 'blur'
						},
						{
							pattern: "^1[35789]\\d{9}$",
							message: '电话号码格式不正确',
							trigger: 'blur'
						}
					]
				}
			},
			methods: {
				//查询所有地址
				findAdminLog() {
					if (this.param.startDate == null) {
						this.param.startDate = '';
					}
					axios.get("http://192.168.95.64:18083/system/admin/log?startDate=" + this.param.startDate +
						"&qureyAdminName=" +
						this.param.qureyAdminName + "&queryOperModel=" + this.param.queryOperModel+"&page="+
						this.param.current+"&pagesize"+this.param.size).then(resp => {
						this.pageBean = resp.data;
					})
				},
				//第一列的行号
				// indexMethod(index) {
				//     return (this.param.current-1)*this.param.size+index+1;
				// },
				//改变页面大小
				handleSizeChange(val) {
					this.param.size = val;
					this.findAddress();
				},
				//改变当前页
				handleCurrentChange(val) {
					/*  axios.post("/address/getall","size="+this.param.size+"&current="+val).then(rsp=>{
					      this.pageBean=rsp.data
					  })*/
					this.param.current = val;
					this.findAddress();
				},
				//编辑按钮
				handleEdit(index, row) {
					this.dialogFormVisible = true;
					this.value2=row;
					this.url="Http://"+this.value2.addressIp+this.value2.operUrl;
					if(this.value2.operParameter==null){
						this.requestName="GET";
					}else{
						this.requestName="POST";
					}
				},
			},
			mounted() {
				//页面加载就读取所有地址数据
				this.findAdminLog();
				setInterval(() => {
					this.findAdminLog();
				}, 1000);


			}
		});
	</script>
	</body>
</html>
